<template lang="html">
      <ul class="list">
          <li class="item" :ref="item" @touchen="handleTrouchsEnd" @touchmove="handleTrouchMove" @touchstart="handleTrouchStart" @click="handleLetterClick" v-for ="item of letters" :key="item">{{item}}</li>
      </ul>
  </template>

<script>
export default {
	name: 'CityAlphabet',
	props: {
		cities: Object
	},
	computed: {
		letters() {
			const letters = []
			for (let i in this.cities) {
				letters.push(i)
			}
			return letters
		}
	},
	data() {
		return {
			touchStatus: false,
			startY: 0,
			timer: null
		}
	},
	updated() {
		this.startY = this.$refs['A'][0].offsetTop
	},
	methods: {
		handleLetterClick(e) {
			this.$emit('change', e.target.innerText)
		},
		handleTrouchStart() {
			this.touchStatus = true
		},
		handleTrouchMove(e) {
			if (this.touchStatus) {
				if (this.timer) {
					clearTimeout()
				}
				this.timer = setTimeout(() => {
					const trochY = e.touches[0].clientY - 79
					const index = Math.floor((trochY - this.startY) / 20)
					if (index >= 0 && index <= this.letters.length) {
						this.$emit('change', this.letters[index])
					}
				}, 16)


			}
		},
		handleTrouchsEnd() {
			this.touchStatus = false

		}
	}
}
</script>

<style lang="scss" scoped>
@import '~scss/varibles';

.list {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 0;
    top: 1.58rem;
    bottom: 0;
    width: 0.4rem;
    color: $bgColor;
    .item {
        text-align: center;
        line-height: 0.4rem;
    }
}
</style>
